<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>偶像练习生</title>

    <script src="js/vue.global.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="data/data.js"></script>
    <script src="data/china_music.js"></script>
    <script src="localforage.min.js"></script>
</head>
<body>
<div  id="app" >
    <ol class="breadcrumb navbar-fixed-top">
        <li v-on:click="toTop()">Again {{(pageNum-1) * pageSize+pageSize}}</a></li>
        <li v-on:click="pageBtn(-1)">prev</li>
        <li v-on:click="pageBtn(1)">next</li>
        <li v-on:click="reviewBtn()" :style="{'color':isReview?'red':'black'}">review</li>
        <li  style="float:right">
            <!-- Single button -->
            <div class="btn-group">
                <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
                <ul class="dropdown-menu"  aria-labelledby="dropdownMenu3">
                    <li style="margin-top: 10px" class="active" v-if="isShow" v-on:click="showAndHide('all')">hide</li>
                    <li style="margin-top: 10px"  class="active" v-if="!isShow"  v-on:click="showAndHide('all')">show</li>
                    <li style="margin-top: 10px"  class="active" v-if="sound"  v-on:click="soundBtn()">sound</li>
                    <li style="margin-top: 10px"  class="active" v-if="!sound"  v-on:click="soundBtn()"><s>sound</s></li>
                    <li style="margin-top: 10px"  class="active" v-on:click="musciDivSHow()">music</li>
                    <li style="margin-top: 10px"  class="active" v-on:click="checkAudioUrl()">check</li>
                    <!--<li class="active" v-on:click="saveMp3()">saveMp3</li>-->
                </ul>
            </div>
        </li>
        <li style="float:right" class="active" v-on:click="autoNextMusic()">BGM</li>
    </ol>
    <!--背单词页面-->
    <div v-show="!isShowMusicDiv" class="panel panel-default" >
        <div class="panel-body">
            <div class="table" style="margin-top: 20px">
                <!-- 进度条 -->
                <div style="vertical-align:bottom" v-for="(item,index) in showData" :key='item.id' :id="'word_'+item.id" class="line">

                    <div :id="'tdId_'+item.id" class="idcss" >{{ index+1 }}</div>
                    <!-- 中文 -->
                    <div class="chWord" @click="showAndHide(item),progressBar(index+1),playAudio(item)" v-if="!isReview" v-html="item.desc"></div>
                    <!-- 单词 -->
                    <div class="enWord" @click="showAndHide(item),progressBar(index+1),playAudio(item)" v-if="isReview">
                        <span style="font-size: 30px" v-html="item.word"></span>
                    </div>
                    <!-- 音标 -->
                    <div class="phonetic" v-on:click="playAudio(item)"  >
                        <span v-if="item.isShow"style="color: #7c6e6e">{{ item['uk-phonetic'] }}</span>
                    </div>
                    <!-- 中文 -->
                    <div class="chWordReview" v-if="item.isShow && isReview" >
                        <span style="text-align: left" v-html="item.desc"></span>
                    </div>
                    <!-- 单词 -->
                    <div class="enWordReview" v-if="item.isShow && !isReview">
                        <span style="font-size: 30px" v-html="item.word"></span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <br/>
    <!-- 背景音乐模块 -->
    <div v-show="isShowMusicDiv"  class="panel panel-default" >
        <div class="panel-body">
            <!-- Table -->
            <table class="table"style="margin-top: 20px">
                <tbody>
                <tr v-for="(item,index) in musicList" :id="'word_'+item.id">
                    <td style="width: 10%;">{{ index+1 }}</td>
                    <td style="width: 60%"   v-on:click="showAndHide(item)"  >{{ item.name }}</td>
                    <td style="width: 20%">
                        <span v-if="item.status==1" v-on:click="pauseBkAudio()">正在播放中..{{musicMsg}}</span>
                        <span v-if="item.status==2" v-on:click="pauseBkAudio()">暂停播放中..{{musicMsg}}</span>
                        <span v-if="item.status==0" v-on:click="playBkAudio(item)" >播放{{musicMsg}}</span>
                    </td>
                    <td style="width: 10%">
                        <span><span v-if="item.status==1"  v-on:click="pauseBkAudio()" >暂停</span></span>
                        <span><span v-if="item.status==2"  v-on:click="playBkAudio(item)" >继续</span></span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="init.js"></script>
</html>